<template>
  <div style="min-width:1200px">
    <div><img src="/img/Wonders/qijingbig.jpg" alt="" style="width:100%"></div>
    
    <div class="container">
      <div class="active-outer">
        <div class="active-content">
        <span>新闻资讯</span>
        </div>
      </div>

      <div class="matter" v-for="item in xin" :key="item.key">
        <div class="matter-left">
          <router-link to="/two">{{item.title}}</router-link>
        </div>
        <div class="matter-right">
          <router-link to="/two">{{item.xinwen}}</router-link>
        </div>
        <div class="matter-right">
          <router-link to="/two">{{item.riqi}}</router-link>
        </div>
      </div>
      <el-pagination
      background
      layout="prev, pager, next"
      :total="20" style="margin-top:80px; margin-left: 480px;">
      </el-pagination>
    </div>
  </div>
</template>
<style scoped>
  .container{
    max-width: 1100px;
    margin: 0 auto;
  }
  .container .active-content>span{
    color: #ff6637;
    font-size: 16px;
    font-family: '微软雅黑';
  }
  .container .active-outer{
    height: 50px;
    border-bottom: 1px solid #eaeaea;
    display: flex;
    align-items: center;
  }
  .container .active-content{
    width: 70px;
    height: 50px;
    line-height: 50px;
    border-bottom: 2px solid #ff6637;
  }
  .container .matter{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    border-bottom: 2px dashed #eaeaea;
  }
  .container .matter .matter-left{
    width: 650px;
  }
  .container .matter a{
    text-decoration: none;
    color: #666666;
    font-size: 16px;
    font-family: '微软雅黑';
  }
  .container .matter a:hover{
    color: #ff6637;
  }
  .container .matter .matter-right{
    width: 150px;
    text-align: right;
  }
</style>
<script>
export default {
  data() {
    return {
      xin: [],
    };
  },
  mounted() {
    this.axios.get("/info").then((result) => {
      // console.log(result);
      // 将result.data.result中返回的文章详情对象存入data
      this.xin = result.data.results;
    });
  },
};
</script>